<div class="system-organize page-content ">
	<form nz-form [formGroup]="validateForm" class="page-header">
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="deptName">组织名称</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="deptName" />
					</nz-form-control>
				</nz-form-item>
			</div>

			<div nz-col [nzSpan]="10" [nzOffset]="8">
				<nz-form-item style="float: right;">
					<button nz-button *ngIf="authList.includes(authEnum.SYSTEM_ORGANIZE_VIEW)" style="margin-right: 10px;" (click)="onSearch()">
						<i nz-icon nzType="search"></i>
						搜索
					</button>
					<button nz-button *ngIf="authList.includes(authEnum.SYSTEM_ORGANIZE_ADD)" nzType="primary" style="margin-right: 10px;"  (click)="add()">
						<i nz-icon nzType="plus"></i>
						新增
					</button>
					<button nz-button *ngIf="authList.includes(authEnum.SYSTEM_ORGANIZE_VIEW)" nzType="primary" style="margin-right: 10px;" (click)="expand()">
						全部展开
					</button>
					<button nz-button *ngIf="authList.includes(authEnum.SYSTEM_ORGANIZE_VIEW)" nzType="primary" (click)="fold()">
						全部折叠
					</button>
				</nz-form-item>
			</div>
		</div>

	</form>


	<nz-table #basicTable [nzData]="data" [nzBordered]="true" [nzShowPagination]="false" nzSize="middle"
		[nzScroll]="{y:  'calc(100vh - 190px)'}" [nzLoading]="nzLoading" [nzPageSize]="page.limit">
		<thead>
			<tr>
				<th style="padding-left: 40px;" nzWidth="auto">组织名称</th>
				<th nzAlign="center" nzWidth="auto">所属社区</th>
				<th nzAlign="center" nzWidth="400px">操作</th>
			</tr>
		</thead>
		<tbody>
			<ng-container *ngFor="let item  of basicTable.data;">
					<tr *ngIf="(item.parent && item.parent.expand) || !item.parent" [ngClass]="{'active': item.isSel}">
						<td style="padding-left: 40px;" 
							[nzIndentSize]="item.level! * 24" 
							[nzShowExpand]="!!item.children && editData?.id !== item.id"
							[(nzExpand)]="item.expand"
							[ngClass]="{'organize-edit': editData?.id === item.id}"
							(nzExpandChange)="collapse(item, $event)">
							<ng-container *ngIf="editData?.id !== item.id">
								<i nz-icon *ngIf="!item.children" nzType="file" nzTheme="outline" style="margin-right: 5px;"></i>
								<i nz-icon style="margin-right: 5px;" *ngIf="!!item.children" [nzType]="item.expand ? 'folder-open' : 'folder'" nzTheme="outline"></i>
								{{ item.deptName }}
							</ng-container>
							<ng-container *ngIf="editData?.id === item.id">
								<input nz-input [(ngModel)]="editData.deptName"  placeholder="请填写">
								
							</ng-container>
						</td>
						<td nzAlign="center">
							<ng-container *ngIf="editData?.id !== item.id">
								{{ item.areaFullName }}
							</ng-container>
							<ng-container *ngIf="editData?.id === item.id">
								<nz-cascader style="width: 100%;" nzPlaceHolder="请选择社区" [(ngModel)]="editData.ownerCommunity" [nzOptions]="areaAddrOptions" 
								[nzShowSearch]="true"> </nz-cascader>
							</ng-container>
						</td>
						<td nzAlign="center">
							<div class="menu-btn">
								<ng-container *ngIf="editData?.id !== item.id">
									<ng-container *ngIf="authList.includes(authEnum.SYSTEM_ORGANIZE_EDIT)">
										<a (click)="edit(item)">编辑</a>
									</ng-container>
									
									<nz-divider *ngIf="authList.includes(authEnum.SYSTEM_ORGANIZE_EDIT) && authList.includes(authEnum.SYSTEM_ORGANIZE_DEL)" nzType="vertical"></nz-divider>
									<ng-container *ngIf="authList.includes(authEnum.SYSTEM_ORGANIZE_DEL)">
										<a  nz-popconfirm nzPopconfirmTitle="确定删除吗?" (nzOnConfirm)="del(item)">删除</a>
									</ng-container>
									<ng-container *ngIf="authList.includes(authEnum.SYSTEM_ORGANIZE_EDIT)">
										<nz-divider nzType="vertical"></nz-divider>
										<a (click)="add(item)">添加下级部门</a>
									</ng-container>

									
								</ng-container>
								<ng-container *ngIf="editData?.id === item.id">
									<a (click)="save(item)">保存</a>
									<nz-divider nzType="vertical"></nz-divider>
									<a (click)="cancel(item)">取消</a>
								</ng-container>
							</div>
							
						</td>
					</tr>
					<tr *ngIf="item?.isSpinning">
						<td colSpan="2" style="padding: 0;">
							<ng-template #indicatorTemplate><i nz-icon nzType="loading" style="margin-right: 10px;"></i>加载中...</ng-template>
							<nz-spin nzSimple [nzIndicator]="indicatorTemplate" class="td-loading"></nz-spin>
						</td>
					</tr>
			</ng-container>
		</tbody>
	</nz-table>

	<div class="page-pagination">
		<span *ngIf="data?.length">共{{data?.length}}条数据</span>
		<!-- <nz-pagination [(nzPageIndex)]="page.page" [nzTotal]="page.total" nzShowQuickJumper nzShowSizeChanger
			[(nzPageSize)]="page.limit" (nzPageIndexChange)="pageChange()" (nzPageSizeChange)="pageChange()">
		</nz-pagination> -->
	</div>

</div>